<template>
  <div class="home">
    <!-- 搜索框 -->
    <Search></Search>
    <!-- //轮播图 -->
    <van-swipe :autoplay="3000" :height="200">
      <van-swipe-item v-for="(item, index) in imgArr" :key="index">
        <img v-lazy="item.image_url" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="5">
      <van-grid-item
        v-for="(value, index) in channel"
        :key="index"
        :icon="value.icon_url"
        :text="value.name"
        @click="goGoodsCategory(value.id)"
      />
    </van-grid>
    <!-- 产品制造商 -->
    <div class="title">产品制造商</div>
    <div class="brandList">
      <div
        class="brandList1"
        v-for="item in brandList"
        :key="item.id"
        :style="`background: url(${item.app_list_pic_url}) no-repeat;background-size:100% 100%`"
        bindtap="GoDrand"
        :data-id="item.id"
      >
        <div class="brandList2">{{ item.name }}</div>
        <div class="brandList3">{{  Number(item.floor_price).toFixed(2) }}</div>
      </div>
    </div>
    <!-- 新品发布 -->
    <div class="title">
        周一周四-新品发布
      </div>
    <div>
      <div class="commodity">
        <div
          class="commodity1"
          :key="val.id"
          v-for="val in newGoodsList"
          :data-id="val.id"
          @click="goDetails(val.id)"
        >
          <img
            class="commodity_img"
            :src="val.list_pic_url"
          />
          <div>{{ val.name }}</div>
          <div class="price">{{ Number(val.retail_price).toFixed(2)  }}</div>
        </div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="title">人气推荐</div>
    <div class="hotGoodsList">
      <div class="hotGoodsList_1" v-for="item in hotGoodsList" :key="item.id">
        <div class="hotGoodsList_2">
          <img class="hotGoodsList_4" :src="item.list_pic_url" />
        </div>
        <div class="hotGoodsList_3">
          <span class="h3">{{ item.name }}</span>
          <div class="h1">{{ item.goods_brief }}</div>
          <span class="h2" style="color: rgb(172, 90, 61)">{{
            Number(item.retail_price).toFixed(2) 
          }}</span>
        </div>
      </div>
    </div>
    <!-- 专题模块 -->
    <div class="title">专题模块</div>
    <van-swipe :loop="false" :width="340" :show-indicators="false">
      <van-swipe-item v-for="item in topicList" :key="item.id" class="fz"
        >
        <img :src="item.item_pic_url" alt="" :width="340" :height="188">
        <div style="padding: 10rpx 0"
          ><span>{{ item.title }}</span
          ><span style="color: rgb(173, 92, 62)">{{
            item.price_info
          }}</span></div
        >
        <div class="fz_1">{{ item.subtitle }}</div>
      </van-swipe-item>
    </van-swipe>
    <!-- 居家 -->
    <commodity :categoryList="categoryList"></commodity>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { GetHomeLists } from "../request/api";
import commodity from "../components/commodity.vue";
import Search from '../components/Search.vue'
export default {
  components: {
    commodity,Search
  },
  data() {
    return {
      
      //轮播图
      imgArr: [],
      //
      channel: [],
      //居家
      categoryList: [],
      //新品发布
      newGoodsList:[],
      //
      brandList: [],
      //人气推荐
      hotGoodsList: [],
      //专题
      topicList: [],
    };
  },
  created() {
    GetHomeLists().then((res) => {
      if (res.errno === 0) {
        console.log(res.data); // 成功拿到所有首页数据
        let {
          banner,
          channel,
          categoryList,
          brandList,
          topicList,
          hotGoodsList,
          newGoodsList
        } = res.data;
        this.imgArr = banner;
        this.channel = channel;
        this.brandList = brandList;
        this.categoryList = categoryList;
        this.topicList = topicList;
        this.hotGoodsList = hotGoodsList;
        this.newGoodsList = newGoodsList;
        // console.log(this.topicList);
      }
    });
  },
  methods:{
    goDetails(id) {
      this.$router.push(`/details?id=${id}`);
      // console.log();
    },
    goGoodsCategory(id){
      this.$router.push(`/goodcategiry?id=${id}`);
    }
  }
};
</script>




<style lang="less" scoped >
.title {
  height: 50px;
  margin-top: 20px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
  font-size: 20px;
}
.fz{
  padding-right: 10px;
  padding-bottom: 10px;
  background-color: #fff;
}
.fz_1 {
  font-size: 24rpx;
  line-height: 40rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.brandList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .brandList1 {
    width: 49.5%;
    height: 130px;
    margin-bottom: 2px;
    .brandList2 {
      margin: 10px 0;
      padding-left: 5px;
    }
    .brandList3 {
      color: rgb(160, 91, 66);
      padding-left: 5px;
    }
  }
}
// 人气推荐
.hotGoodsList {
  background: #fff;
  padding: 5px;
  .hotGoodsList_1 {
    display: flex;
    padding: 5px 0;
    .hotGoodsList_2 {
      width: 88px;
      height: 88px;
      .hotGoodsList_4 {
        width: 100%;
      }
    }
    .hotGoodsList_3 {
      padding-left: 5px;
      flex: 1;
      .h3 {
        font-size: 18px;
      }
      .h1 {
        font-size: 12px;
        margin: 10px 0;
      }
    }
  }
}
.commodity {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding-bottom: 10px;
  font-size: 14px;
  color: #333333;
}
.commodity .commodity1 {
  width: 50%;
}
.commodity .commodity1 .commodity_img {
  width: 80%;
}
.commodity .price {
  line-height: 30px;
  color: rgb(182, 111, 85);
}
</style>

